<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-18 14:01:16
-->
<template>
  <div class="userInfo_page">
    <van-nav-bar
      title="用户资料"
      left-text="返回"
      left-arrow
      @click-left="router.go(-1)"
    />
    <van-form @submit="onSubmit" style="margin: 20px 10px">
      <van-cell-group inset>
        <upload ref="upload" @uploadSucc="uploadSucc"></upload>
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          label="昵称"
          name="nick"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
          v-model="data.nick"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          label="签名"
          name="motto"
          placeholder="签名"
          :rules="[{ required: true, message: '请填写签名' }]"
          v-model="data.motto"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          is-link
          readonly
          name="sex"
          label="性别"
          placeholder="点击选择性别"
          @click="showPicker = true"
          v-model="data.sex"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          rows="2"
          autosize
          label="教育经历"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言"
          show-word-limit
          v-model="data.school"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          rows="2"
          autosize
          label="个人说明"
          type="textarea"
          maxlength="200"
          placeholder="请输入留言"
          name="description"
          show-word-limit
          v-model="data.description"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>



<script >
import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import storage from "@/utils/storage";
import upload from "@/components/uplaod.vue";
import { getMyInfoData, updateMyInfo } from "@/api/my.js";
export default defineComponent({
  components: {
    upload,
  },
  setup() {
    const router = useRouter();
    const user = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
    const onConfirm = (value) => {};

    onMounted(() => {
      init();
    });

    const data = reactive({
      emotionalState: "",
      nick: "",
      sex: null,
      starSign: "",
      description: "",
      headUrl: "",
      motto: "",
      school: "",
      address: {
        area: "",
        country: "",
        areaCode: "",
        proCode: "",
        province: "",
        city: "",
        cityCode: "",
        countryCode: "",
      },
    });

    const upload = ref();
    const init = async () => {
      const res = await getMyInfoData({});
      if (res) {
        data.nick = res.nick;
        data.school = res.school;
        data.motto = res.motto;
        data.description = res.description;
        data.sex = res.sex ? "男" : "女";
        data.headUrl = res.headUrl;
        upload.value.fileList = [{ url: res.headUrl }];
      }
    };
    const uploadSucc = (url) => {
      data.headUrl = url;
    };
    const onSubmit = async (values) => {
      console.log("submit", values);
      let val = values
      val.headUrl = data.headUrl
      const res = await updateMyInfo(val)
    };
    return {
      upload,
      data,
      router,
      onSubmit,
      onConfirm,
      uploadSucc,
      showPicker: ref(false),
      columns: ["男", "女"],
    };
  },
});
</script>
